<template>
	<view>
		<u-form :model="engineeringDangerParams" ref="uForm" label-width="160">
			<u-form-item label="险情地点" prop="address" :required="true">
				<u-input v-model="engineeringDangerParams.address" type="text" :border="true" placeholder="请输入地点" @click="checkAddress"/>
				<img class="rightIcon" src="../../../assets/images/home/icon_position.png">
			</u-form-item>
			<u-form-item label="发生时间" prop="happenTime" :required="true">
				<u-input v-model="engineeringDangerParams.happenTime" type="text" :border="true" disabled placeholder="请选择时间"
					@click="chooseTime" />
					<img class="rightIcon" src="../../../assets/images/home/icon_calendar.png">
			</u-form-item>
			<div class='checkTitle'>工程险情</div>
			<u-form-item label=""  prop="type">
				<!-- <u-radio-group v-model="engineeringDangerParams.type">
					<u-radio v-for="item in types" :name="item.value">{{item.label}}</u-radio>
				</u-radio-group> -->
				<div class='checkBtnList'>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex==1}" @click="checkBtnClick(1)" style='width: 16%;margin-right:8px'>
						满溢
					</div>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex==2}" @click="checkBtnClick(2)" style='width: 16%;margin-right:8px'>
						渗水
					</div>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex==3}" @click="checkBtnClick(3)"  style='width: 16%;margin-right:8px'>
						渗漏
					</div>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex==4}" @click="checkBtnClick(4)" style='width: 16%;margin-right:8px'>
						崩塌
					</div>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex==5}" @click="checkBtnClick(5)"  style='width: 16%;margin-right:8px'>
						其他
					</div>
				</div>
			</u-form-item>
			<div class='checkTitle'>影响面积</div>
			<u-form-item label=""  prop="area">
				<!-- <u-radio-group v-model="engineeringDangerParams.area">
					<u-radio v-for="item in areas" :name="item.value">{{item.label}}</u-radio>
				</u-radio-group> -->
				<div class='checkBtnList'>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex2==1}" @click="checkBtnClick2(1)" style='margin-right:8px'>
						1000m²以下
					</div>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex2==2}" @click="checkBtnClick2(2)" style='width: 35%;margin-right:8px'>
						1000m²-3000m²
					</div>
					<div  class='checkBtn3' :class="{checkBtnActive:checkBtnIndex2==3}" @click="checkBtnClick2(3)"  style='margin-right:8px'>
						3000m²以上
					</div>
				
				</div>
			</u-form-item>
			<u-form-item label="影响人口" prop="personNumber"><u-input v-model="engineeringDangerParams.personNumber" type="number" maxlength='8' :border="true" placeholder="请输入人口数量"/></u-form-item>
			<div class='checkTitle'>备注说明</div>
			<u-form-item label="" prop="description">
				<u-input v-model="engineeringDangerParams.description" type="textarea" class="textareaBox" height="160" placeholder="文字填写险情原因、影响等" />
			</u-form-item>
			<div style="margin-bottom: 30rpx;"  class='checkTitle'>现场照片(上传照片或者视频)</div>
			<view class="uni-list list-pd">
				<view class="uni-uploader__files">
					<block v-for="(image,index) in imageList" :key="index" >
			    			<view class="uni-uploader__file">
			    				<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage(index)"></image>
			    				<i class="close" @tap="deleteImage(index)"></i>
			    			</view>
			    		</block>
						<block v-for="(video,index) in videoList" :key="'video'+index">
							<view class="uni-uploader__file">
								<video :src="video" @click="playvideo(index)" @fullscreenchange="fullscreenchange" :id="'myVideo'+index"></video>
								<i class="close" @tap="deleteVideo"></i>
							</view>
						</block>

					<view class="uploader__img"><span @tap="chooseImage">添加图片</span></view>

					<view class="uploader__video"><span @tap="chooseVideo">添加视频</span></view>
				</view>
			</view>
		</u-form>
		<u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		props:["engineeringDangerParams","addressInfo"],
		// props: {
		// 	engineeringDangerParams: {
		// 		address:"",
		// 		lngLat:[],
		// 		happenTime:"",
		// 		type:1,
		// 		area:1,
		// 		personNumber:'',
		// 		description:'',
		// 		attachFiles:[],
		// 		imageFiles:[], //图片 file集合
		// 		videoFiles:[],//视频 file集合
		// 	},
		// },
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				showTime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
				},
				imageList:[], //图片数组
				videoList:[], //视频数组
				// imageFiles:[], //图片 file集合
				// videoFiles:[],//视频 file集合
				imageShow:true, //显示上传图片按钮
				videoShow:true, //显示上传视频按钮
				types: [
                    {
                        value: 1,
                        label: "满溢",
                    },
                    {
                        value: 2,
                        label: "渗水",
                    },
                    {
                        value: 3,
                        label: "渗漏",
                    },
                    {
                        value: 4,
                        label: "崩塌",
                    },
                    {
                        value: 5,
                        label: "其他",
                    }
                ],
                areas: [
                    {
                        value: 1,
                        label: "1000m²以下",
                    },
                    {
                        value: 2,
                        label: "1000m²-3000m²",
                    },
                    {
                        value: 3,
                        label: "3000m²以上",
                    }
                ],
				checkBtnIndex:1,
				checkBtnIndex2:1,
			}
		},
		computed: {
			
		},
		methods: {
			checkBtnClick(data) {
				this.checkBtnIndex = data
				this.engineeringDangerParams.type = data
			},
			checkBtnClick2(data) {
				this.checkBtnIndex2 = data
				this.engineeringDangerParams.area = data
			},
			checkAddress(){
				uni.navigateTo({url: '/pages/local/gaod'});
			},
			chooseTime() {
				this.showTime = true
			},
			confirm(data){
				this.engineeringDangerParams.happenTime = `${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},
			chooseImage(){
				uni.chooseImage({
				  	count: 9,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['camera','album'], //这要注意，camera掉拍照，album是打开手机相册
				    success: (res)=> {
						if(res.tempFilePaths.length == 9){
							this.imageShow = false
						}
						if(this.imageList.length>=9 || res.tempFilePaths.length>9){
							uni.showToast({
								icon:'none',
							    title:'最多只可上传9张图片'
							})
							this.imageShow = false
						}else{
							this.imageList = this.imageList.concat(res.tempFilePaths)
							this.engineeringDangerParams.imageFiles = this.engineeringDangerParams.imageFiles.concat(res.tempFiles)
							
							console.log(this.engineeringDangerParams.imageFiles)
						}
				    }
				});
			},
			chooseVideo(){
				uni.chooseVideo({
					count: 2,
					sourceType: ['camera', 'album'],
					success:(res)=> {
						console.log(res);
						if(this.videoList.length > 1){
							this.videoShow = false
						}
						if(this.videoList.length>=2){
							uni.showToast({
								icon:'none',
							    title:'最多只可上传2个视频'
							})
							this.videoShow = false
						}else{
							this.videoList.push(res.tempFilePath)
							this.engineeringDangerParams.videoFiles.push(res.tempFile)
						}
						
						console.log(this.engineeringDangerParams.videoFiles);
					}
				});
			},
			previewImage(index){
				uni.previewImage({
					current:index, //预览图片的下标
					urls: this.imageList,  //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以				
				});
			},
			playvideo(index){
				
			    this.videoContext = uni.createVideoContext('myVideo'+index, this);
			    this.videoContext.requestFullScreen({direction: 0});
			    this.videoContext.play()
			},
			fullscreenchange (e){
			    if(!e.detail.fullScreen){  
			        this.videoContext.pause()
			    }
			},
			deleteImage(index){
				this.imageList.splice(index, 1);
				this.engineeringDangerParams.imageFiles.splice(index, 1);
			},
			deleteVideo(index){
				this.videoList.splice(index, 1);
				this.engineeringDangerParams.videoFiles.splice(index, 1);
			},
		},
		watch: {
		    addressInfo: {
		      handler: function (newV) {
		        this.engineeringDangerParams.address = newV.address;
		        this.engineeringDangerParams.lgtd = newV.local[0];
		        this.engineeringDangerParams.lttd = newV.local[1];
		      },
		      immediate: true
		    },
		},
		mounted() {
			this.engineeringDangerParams.happenTime = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd') + ' ' + this.$u.timeFormat(new Date().getTime(), 'hh:MM:ss')
		}
	}
</script>

<style lang="scss" scoped>
	.uni-uploader__files {
		display: flex;
		flex-wrap: wrap;

		.uni-uploader__file {
			width: 168rpx;
			height: 168rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			uni-image,
			uni-video {
				width: 100%;
				height: 100%;
			}

			&:nth-child(3n) {
				margin-right: 0rpx;
			}

			.close {
				width: 48rpx;
				height: 48rpx;
				background: url(../../../assets/images/home/icon_del.png) no-repeat 0 0;
				background-size: 100%;
				display: inline-block;
				position: absolute;
				top: -12rpx;
				right: -12rpx;
				z-index: 9;
			}
		}
	}

	.uploader__img,
	.uploader__video {
		border: 1px dotted #C6C8CC;
		width: 166rpx;
		height: 166rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		span {
			color: #A0A8B3;

			&::before {
				content: "";
				display: block;
				width: 60rpx;
				height: 60rpx;
				background: url(../../../assets/images/home/icon_video.png) no-repeat 0 0;
				background-size: 100%;
				margin: 0 auto 12rpx;
			}
		}
	}

	.uploader__img {
		margin-right: 20rpx;

		span {
			&::before {
				background: url(../../../assets/images/home/icon_picture.png) no-repeat 0 0;
				background-size: 100%;
			}
		}
	}
</style>
